<template>
	<div class="cashier">
		<el-row
			type="flex"
			class="row-bg"
			style="position: fixed; top: 0; width: 100%; z-index: 2020; background: #fff; box-shadow: 0 5px 8px 0 rgb(0 0 0 / 1%); padding: 8px 20px"
			justify="space-between"
		>
			<el-col :span="9">
				<div class="top-btns">
					<el-dropdown @command="selectCashierDate">
						<span class="el-dropdown-link" style="font-size: 24px"
							>{{ cashierDate[selectCashierDateIndex].text }}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="(item, index) in cashierDate" :key="index" :command="index">{{ item.text }}</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<el-dropdown class="box-magrin-left-42" @command="selectServiceStatus">
						<span class="el-dropdown-link">
							{{ serviceStatus[selectServiceStatusIndex].text }}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="(item, index) in serviceStatus" :key="index" :command="index">{{ item.text }}</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

					<div class="box-magrin-left-42" @click="onShowStaffDrawer">单据人员</div>
				</div>
			</el-col>
			<el-col :span="15">
				<div class="top-btns" style="justify-content: right; position: fixed; right: 22px">
					<el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="keyword"> </el-input>
					<el-button class="box-magrin-left-42" type="warning" icon="el-icon-star-off" circle></el-button>
					<el-button class="box-magrin-left-42" type="danger" icon="el-icon-delete" circle></el-button>
					<el-button class="box-magrin-left-42" type="primary" @click="onShowOrderCart">开单</el-button>
				</div>
			</el-col>
		</el-row>

		<div class="hanging-order-list">
			<div class="hanging-order-item" v-for="item in 18" :key="item">
				<div style="width: 38px;height: 38px;position: absolute;top: -14px;left: 2px;">
					<img
						style="width: 38px; height: 38px"
						:src="getTuding(item  % 4)"
						alt=""
					/>
				</div>
				<p class="topbg"></p>
				<div class="order-header">
					<p>F808</p>
					<p>散客</p>
					<p>00:05</p>
				</div>

				<div class="order-table">
					<table class="product-table" border="1">
						<tr>
							<td>名称</td>
							<td>销售</td>
							<td>金额</td>
						</tr>
						<tr v-for="item in 3">
							<td>欧莱雅小金瓶</td>
							<td>张三、李四</td>
							<td>500</td>
						</tr>
					</table>
				</div>

				<div class="order-sum">
					<p>合计：</p>
					<p>2265</p>
				</div>

				<div class="hanging-order-remark">
					111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
				</div>
			</div>
		</div>

		<div class="scale-example">
			<div class="example-list">
				<div class="example-item" v-for="item in serviceStatusFlag" :key="item">
					<p class="example-dot" :style="{background: item.color}"></p>
					<span>{{item.text}}({{item.num}})</span>
				</div>
			</div>
			<p class="split-line"></p>
			<i class="el-icon-refresh-right reload" @click="onReload"></i>
		</div>

		<el-drawer :modal="false" title="我是标题" custom-class="staff-drawer" :visible.sync="drawer" direction="ttb" size="450px" :with-header="false">
			<div style="padding: 1px 21px">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="发型师" name="first"></el-tab-pane>
					<el-tab-pane label="洗发师" name="second"></el-tab-pane>
					<el-tab-pane label="店长" name="third"></el-tab-pane>
					<el-tab-pane label="技师" name="fourth1"></el-tab-pane>
				</el-tabs>

				<div style="display: flex; flex-wrap: wrap">
					<div class="staff_item" v-for="item in 30" :key="item">
						<el-image style="width: 100px; height: 100px" src="https://s1.xptou.com/2022/09/26/6331ada113a7e.png"> </el-image>
						<p>005</p>
						<p>张三李四{{ item }}</p>
					</div>
				</div>
			</div>
		</el-drawer>

		<OrderCart ref="orderCart"></OrderCart>
	</div>
</template>

<script>
import Scroll from 'vue-seamless-scroll';
import OrderCart from './orderCart';
export default {
	name: 'cashier',
	components: { Scroll, OrderCart },
	data() {
		return {
			selectCashierDateIndex: 0,
			cashierDate: [
				{
					text: '今日收银',
				},
				{
					text: '昨日收银',
				},
				{
					text: '前日收银',
				},
				{
					text: '最近三日',
				},
				{
					text: '指定日期',
				},
			],
			selectServiceStatusIndex: 1,
			serviceStatus: [{ text: '全部' }, { text: '服务中' }, { text: '待结账' }, { text: '已结账' }, { text: '已作废' }],
			serviceStatusFlag: [{ text: '服务中', color: "#F0B518", num: 2 }, { text: '待结账', color: "#BB4949", num: 0  }, { text: '已结账', color: "#15606C", num: 5  }, { text: '已作废', color: "#E01A69", num: 2 }],
			activeName: 'first',
			dialogVisible: false,
			drawer: false,
			keyword: '',
		};
	},
	created() {},
	computed: {},
	mounted() {},
	methods: {
		getTuding(status) {
			switch(status) {
				case 0: return require("@/assets/icon/td1.png");
				case 1: return require("@/assets/icon/td2.png");
				case 2: return require("@/assets/icon/td3.png");
				case 3: return require("@/assets/icon/td4.png");

			}
			
		},
		onReload() {
			this.bus.$emit('onCurrentContextmenuClick', {
				id: 0,
				path: this.$route.path,
			});
		},
		selectCashierDate(command) {
			this.selectCashierDateIndex = command;
		},
		selectServiceStatus(command) {
			this.selectServiceStatusIndex = command;
		},
		onShowStaffDrawer() {
			this.drawer = !this.drawer;
		},
		onShowOrderCart() {
			this.$refs['orderCart'].show();
		},
	},
};
</script>

<style lang="scss">
@import './index.scss';

.top-btns {
	display: flex;
	align-items: center;
	height: 36px;
}
.top-btns .el-input {
	width: 210px;
}
.box-magrin-left-42 {
	margin-left: 42px;
}
// ::v-deep .el-drawer__wrapper {
// 	top: 62px;
// 	left: 76px;
// }
.staff-drawer {
	top: 52px !important;
	left: 76px !important;
	box-shadow: none;
}
.staff_item {
	width: 100px;
	height: 150px;
	margin-right: 15px;
	margin-bottom: 15px;
	display: inline-block;
	border-radius: 3px;
	box-shadow: 0 0 3px 0 #ddd;
	overflow: hidden;
	cursor: pointer;
	background: #fff;
	text-align: center;
}
.hanging-order-list {
	padding: 5px;
	display: flex;
	flex-wrap: wrap;
	margin: 96px 10px 10px 20px;
}

.hanging-order-item {
	background: #fff;
	height: 372px;
	padding: 10px;
	width: 300px;
	margin-right: 12px;
	border: 6px #8a8a8a solid;
	border-radius: 6px;
	position: relative;
	margin-bottom: 12px;
	cursor: pointer;
}

.order-header {
	margin: 18px 0;
	display: flex;
	justify-content: space-between;
}

.order-sum {
	display: flex;
	font-size: 13px;
	justify-content: space-between;
}
.hanging-order-remark {
	font-size: 13px;
	color: #8a8a8a;
	margin-top: -3px;
	padding-left: 28px;
	padding-right: 10px;
	line-height: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 5px;
	background: #f4f4f4 url(https://static.bokao2o.com/wisdomDesk/images/Def_Icon_Edit_Gray.png) 3px/22px no-repeat;
}
.order-table {
	height: 142px;
	overflow: hidden;
}

.topbg {
	position: absolute;
	top: -6px;
	left: 0;
	right: 0;
	margin: auto;
	height: 17px;
	width: 140px;
	background: transparent url(https://static.bokao2o.com/wisdomDesk/images/Def_Icon_OrderTopImg.png) top/140px 17px no-repeat;
}
.scale-example {
	position: fixed;
	right: 15px;
	bottom: 15px;
	display: flex;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border-radius: 5px;
	padding: 8px 0;
}
.example-list {
	display: flex;
	padding-left: 12px;
}
.example-item {
	display: flex;
	align-items: center;
	font-size: 12px;
	margin-right: 8px;
}
.example-dot {
	width: 12px;
	height: 12px;
	margin-right: 6px;
	border-radius: 50%;
}

.split-line {
	width: 1px;
	background: #fff;
	margin: 0 6px;
}

.reload {
	font-size: 22px;
	margin-right: 11px;
	cursor: pointer;
}
.v-modal{
	z-index: 2054!important;
}

.product-table {
		border: 1px solid #ddd;
		border-collapse: collapse;
		width: 100%;
	}
.product-table tr td{
	border: 1px solid #ddd;
	padding: 6px;
}
</style>
